@import "styles/common.scss";
.container {
	display: flex;
	flex-direction: column;
}
.wrap {
	display: inline-block;
}
// 图形时钟
.graphClock {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.clock {
	position: relative;
}

// 日历
.calendar {
	padding: 8px;
	> p {
		font-size: 16px;
		font-weight: bold;
		color: $wordColor;
	}
	> p:first-child {
		margin-bottom: 8px;
		font-size: 23px;
	}
}

// 数字时钟
.numberClock {
	// width: 300px;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	padding: 8px;
	user-select: none;
	.card,
	.split {
		font-size: 63px;
		font-weight: bold;
		padding: 0 2px;
		margin: 0 2px;
	}
	.card {
		box-shadow: 0 4px 3px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	}
	.active {
		color: red;
		animation: myfirst 0.5s infinite;
	}
}

@keyframes myfirst {
	0% {
		transform: rotateX(0deg);
	}
	50% {
		transform: rotateX(180deg);
	}
	100% {
		transform: rotateX(360deg);
	}
}
